<template>
    <div>
        <!-- 轮播图 -->
        <div class="container">
            <el-carousel class="swipper-carusel" height="466px" :interval="5000" arrow="always">
                <el-carousel-item v-for="item in swipperList" :key="item.id">
                    <el-image :src="item.pcAdvertiseUrl" alt=""></el-image>
                </el-carousel-item>
            </el-carousel>
        </div>
        <!-- 二级导航 -->
        <div class="nav_list">

            <div class="nav">
                <div class="swipper_nav">
                    <router-link to="/recommend/item" replace>
                        <span class="swipper_item" :class="{active:route.path.includes('item')}" @click="changeItem">推荐</span>
                    </router-link>
                    <router-link to="/recommend/works" replace>
                        <span class="swipper_item" :class="{active:route.path.includes('works')}">作品</span>
                    </router-link>
                    <router-link to="/recommend/tutorial">
                        <span class="swipper_item" :class="{active:route.path.includes('tutorial')}">教程</span>
                    </router-link>

                    <span class="swipper_item">专题</span>
                    <span class="swipper_item">动态</span>
                    <span class="swipper_item">关注</span>
                    <span class="swipper_item">爵士舞</span>
                    <span class="swipper_item">民族舞</span>
                    <span class="swipper_item">街舞</span>
                    <span class="swipper_item" @click="show" style="margin-left: 300px">
                        <el-icon style="vertical-align: middle">
                            <Fold />
                        </el-icon>
                        选择兴趣技能
                    </span>
                </div>
            </div>

        </div>
        <el-dialog v-model="dialogVisible" title="选择我喜欢的技能" width="60%">
            <div style="margin-top: -40px;margin-bottom: 30px;color: #b1b5c1">例如舞蹈就选舞种</div>
            <div>
                <el-form inline>
                    <el-form-item label-width="600px" style="background-color: #f5f7f9">
                        <el-input :prefix-icon="Search" v-model="remform" placeholder="搜索兴趣技能"
                            style="background-color: #f5f7f9;width: 300px;"></el-input>
                    </el-form-item>

                    <el-form-item style="margin-left: -20px">
                        <el-button @click="getSercch">搜索</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div>
                推荐兴趣技能
            </div>
            <div style="display: flex;flex-wrap:wrap;width: 100%">
                <div v-for="item in logList" style="margin: 10px" :key="item.id">
                    <img class="posi" src="../../../src/assets/4.png" style="width: 40px;border-radius: 50%">
                    <el-button style="width: 100px;margin-left: -40px;
        ">
                        {{ item.name }}
                    </el-button>
                </div>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button size="large" style="width: 120px" @click="dialogVisible = false">取消</el-button>
                    <el-button size="large" style="width: 120px;background-color: #fa5e9d" type="primary"
                        @click="dialogVisible = false">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <router-view />
    </div>
</template>
<script setup>
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { useRoute } from "vue-router"
import RecommendAPI from "../../api/recommend"
const route = useRoute();

// 轮博图数据
const swipperList = ref([])
// 加载数据
const loading = ref(false)
// 点击推荐请求回来的数据
const recommendList = ref([])
//弹框显示隐藏
const dialogVisible = ref(false)
//弹框列表
const logList = ref([])
//弹框搜索数据
const remform = ref('')

//弹框
const show = async () => {
  try {
    const res = await RecommendAPI.getDiloage()
    logList.value = res.content
    console.log(res)
    dialogVisible.value = true
    // ElMessage.success('弹框数据获取成功')
  } catch (e) {
    ElMessage.error('弹框数据获取失败')
  }
}
//弹框搜索

const getSercch = async () => {
  try {
    const res = await RecommendAPI.getSerach(remform.value)
    console.log('搜索',res)
    logList.value = res
    await show
    remform.value = ''
  } catch (e) {

  }
}

// 点击推荐刷新页面
const changeItem = () => {
    loading.value = true
    setTimeout(async () => {
        try {
            let result = await RecommendAPI.getDefault()
            recommendList.value = result.content
            loading.value = false
        } catch (error) {
            ElMessage.error('获取推荐列表数据失败')
            loading.value = false
            console.error(error)
        }
    }, 2000)
}



// 获取轮播图数据
const initData = async () => {
  let result = await axios.get('https://www.dance365.com/apis/promotion/ads/search/findByPosition?access_token=c494ae44-3adc-48ca-8749-5128a53358d7&position=pc_mainpage')
  swipperList.value = result.data
}

onMounted(() => {
  initData()
})

</script>

<style scoped lang="less">
// 轮播图
.container {
  width: 1200px;
  margin: 0 auto;
  margin-top: 20px;

  .el-carousel__item img {
    height: 466px;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }
}

// 二级导航
.nav_list {
    width: 100%;
    height: 80px;
    z-index: 99;
    text-align: center;
    position: sticky;
    top: 0;
    background: #fff;

    .nav {
        text-align: center;
        height: 80px;

        .swipper_nav {
            display: inline-block;
            margin: 0 auto;
            white-space: nowrap;
            text-align: center;
            overflow-x: auto;
            overflow-y: hidden;
            width: 100%;
            background: #fff;

            .swipper_item {
                padding: 20px 4px;
                margin: 0 20px;
                line-height: 70px;
                color: rgb(125, 128, 144);
                font-size: 18px;
                cursor: pointer;
            }

            .swipper_item:hover {
                color: #333;
            }

            .swipper_item.active {
                color: #111;
                border-bottom: 3px #000 solid;
            }
        }

        .nav_item {
            position: absolute;
            display: inline-block;
            top: 0;
            padding-left: 200px;
            right: 10px;
            font-size: 16px;
            line-height: 70px;
            color: rgb(125, 128, 144);
            height: 80px;
            vertical-align: top;
            padding: 0;
            cursor: pointer;
        }
    }

}
//多选框
.posi {
  position: relative;
  bottom: 11px;
  left: 75px;
  z-index: 999;
}

.example-showcase .el-loading-mask {
    z-index: 9999;
}

::v-deep(.el-carousel__button) {
  height: 10px;
  width: 10px;
  margin-right: 20px;
  background-color: skyblue;
  border-radius: 50%;
}
</style>
